<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>17商城</title>
  <link type="text/css" th:href="@{/css/css.css}" rel="stylesheet"/>
</head>

<body>
<div class="mianCont">
  <div th:replace="common/top :: ttoopp"></div>
  <div class="pnt">
    <div class="pntLeft">
      <h2 class="Title">所有商品分类</h2>
      <ul class="InPorNav" id="categoryUL">
      </ul>
      <!--InPorNav/-->
    </div>
    <!--pntLeft/-->
    <div class="pntRight">
      <ul class="nav">
        <li class="navCur"><a href="index.html">商城首页</a></li>
        <li><a href="product.html">促销中心</a></li>
        <li><a href="login.html">会员中心</a></li>
        <li><a href="help.html">帮助中心</a></li>
        <div class="clears"></div>
        <div class="phone">TEL：021-12345678</div>
      </ul>
      <!--nav/-->
      <div class="banner">
        <div id="kinMaxShow">

        </div>
        <!--kinMaxShow/-->
      </div>
      <!--banner/-->
    </div>
    <!--pntRight/-->
    <div class="clears"></div>
  </div>
  <!--pnt/-->
  <div class="rdPro">
    <div class="rdLeft">
      <ul class="rdList">
        <li>推荐产品</li>
        <li>促销产品</li>
        <div class="clears"></div>
      </ul>
      <!--rdList/-->
      <div class="rdProBox" id="recommendDiv">
      </div>
      <!--rdPro/-->
      <div class="rdProBox" id="promotionDiv">
      </div>
      <!--rdPro/-->
    </div>
    <!--rdLeft/-->
    <div class="rdRight" id="rdRightDiv" >
    </div>
    <!--rdRight/-->
    <div class="clears"></div>
  </div>
  <!--rdPro/-->

  <div id="dividerFloor">
  </div>

  <div th:replace="common/foot :: ffoooott"></div>
</div>
<!--mianCont/-->
<a href="#" class="backTop">&nbsp;</a>

<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/js.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script type="text/javascript">
$(function () {
  //热门搜索
  getSkuByHot()

  //显示商品类别
  getCategoryList()

  //显示sku信息
  $.get(base_url + 'sku/v1/indexSkus', function (res) {
    console.info(res)
    if (res.code == 200) {
      let carousel = res.data.carousel

      //轮播图
      let top1 = ''
      for (let i = 0; i < 5; i++) {
        top1 += '<div>'
        top1 += '<a href="proinfo.html?id=' + carousel[i].key + '"><img src="' + IMG_SERVER + carousel[i].value + '" height="360"/></a>'
        top1 += '</div>'
      }
      $('#kinMaxShow').append(top1)
      $('#kinMaxShow').kinMaxShow()

      //推荐商品
      let recommendTmp = ''
      for (let i = 0; i < res.data.recommend.length; i++) {
        let recommend = res.data.recommend[i]
        recommendTmp += '<dl>'
        recommendTmp += '<dt><a href="proinfo.html?id='+recommend.id+'"><img src="' + IMG_SERVER + recommend.img + '" width="132" height="129"/></a></dt>'
        recommendTmp += '<dd>' + recommend.name + '</dd>'
        recommendTmp += '<dd class="cheng">￥' + recommend.price1 + ' - ' + recommend.price2 + '/袋</dd>'
        recommendTmp += '</dl>'
      }
      recommendTmp += '<div class="clears"></div>'
      $('#recommendDiv').append(recommendTmp)
      //促销商品
      let promotionTmp = ''
      for (let i = 0; i < res.data.promotion.length; i++) {
        let promotion = res.data.recommend[i]
        promotionTmp += '<dl>'
        promotionTmp += '<dt><a href="proinfo.html?id='+promotion.id+'"><img src="' + IMG_SERVER + promotion.img + '" width="132" height="129"/></a></dt>'
        promotionTmp += '<dd>' + promotion.name + '</dd>'
        promotionTmp += '<dd class="cheng">￥' + promotion.price1 + ' - ' + promotion.price2 + '/袋</dd>'
        promotionTmp += '</dl>'
      }
      promotionTmp += '<div class="clears"></div>'
      $('#promotionDiv').append(promotionTmp)

      //分隔图片
      let divider = res.data.divider
      //广告图
      let ad = res.data.ad
      $('#rdRightDiv').append('<a href="proinfo.html?id='+ad[0].key+'"><img src="'+IMG_SERVER + ad[0].value+'" width="221" height="254"/></a>');
      //类别+sku
      let categoryWithSku = res.data.categoryWithSku
      let tmp = ''
      for (let i = 0; i < divider.length; i++) {
        //分隔符
        tmp += '<div className="hengfu">'
        tmp += '<a href="proinfo.html?id=' + divider[i].key + '">'
        tmp += '<img src="' + IMG_SERVER + divider[i].value + '" width="979" height="97"/>'
        tmp += '</a></div>'
        //category+sku
        tmp += '<div class="floor" id="floor' + (i + 1) + '">'
        tmp += '<h3 class="floorTitle">'
        tmp += (i + 1) + 'F&nbsp;&nbsp;&nbsp;&nbsp;' + categoryWithSku[i].fatherCategory.name
        tmp += '<a href="product.html?pid=' + categoryWithSku[i].fatherCategory.id + '" class="more">更多 &gt;</a>'
        tmp += '</h3>'
        tmp += '<div class="floorBox">'
        tmp += '<div class="floorLeft">'
        tmp += '<ul class="flList">'
        for (let j = 0; j < categoryWithSku[i].sunCategoryList.length; j++) {
          tmp += '<a href="product.html?id=' + categoryWithSku[i].sunCategoryList[j].id + '">'
          tmp += '<li>' + categoryWithSku[i].sunCategoryList[j].name + '</li>'
          tmp += '</a>'
        }
        tmp += '<li><a href="product.html?pid=' + categoryWithSku[i].fatherCategory.id + '">更多&gt;&gt;</a></li>'
        tmp += '<div class="clears"></div>'
        tmp += '</ul>'
        //每一层楼的广告图片
        tmp += '<div class="flImg"><a href="proinfo.html?id='+ad[i+1].key+'"><img src="' + IMG_SERVER + ad[i + 1].value + '" width="198" height="290"></img></a></div>'
        tmp += '</div>'
        //index页面sku
        tmp += '<div class="floorRight">'
        tmp += '<div class="frProList">'
        let skuItemList = categoryWithSku[i].skuItemList
        for (let k = 0; k < skuItemList.length; k++) {
          tmp += '<dl>'
          tmp += '<dt><a href="proinfo.html"><img src="' + IMG_SERVER + skuItemList[k].img + '" width="132" height="129"/></a></dt>'
          tmp += '<dd>' + skuItemList[i].name + '</dd>'
          tmp += '<dd className="cheng">￥' + skuItemList[i].price2 + ' - ' + skuItemList[i].price1 + '/袋</dd>'
          tmp += '</dl>'
        }
        tmp += '<div class="clears"></div>'
        tmp += '</div>'
        tmp += '</div>'
        tmp += '<div class="clears"></div>'
        tmp += '</div>'
        tmp += '</div>'
      }
      // console.info(tmp)
      $('#dividerFloor').append(tmp)

      //从js.js拷贝过来的，显示用的
      //rdList
      $('.rdList li:first').addClass('rdListStyle')
      $('.rdProBox:first').show()
      $('.rdList li').click(function () {
        $(this).addClass('rdListStyle').siblings('li').removeClass('rdListStyle')
        var index = $(this).index()
        $('.rdProBox').eq(index).show().siblings('.rdProBox').hide()
      })
      //.rdPro dl
      $('.rdPro dl').hover(function () {
        $(this).addClass('rddlstyle')
        $(this).stop(true, true).animate({
          opacity: '0.7'
        })
      }, function () {
        $(this).removeClass('rddlstyle')
        $(this).stop(true, true).animate({
          opacity: '1'
        })
      })
      //.upd,.add
      $('.upd,.add,.vipUp').click(function () {
        $('.address').stop(true, true).slideDown()
      })
      //flList
      $('#floor1 .frProList:first').show()
      $('#floor2 .frProList:first').show()
      $('#floor3 .frProList:first').show()
      $('#floor4 .frProList:first').show()
      $('.flList li:first').addClass('flListStyle')
      $('#floor1 .flList li').click(function () {
        $(this).addClass('flListStyle').siblings('li').removeClass('flListStyle')
        var index2 = $(this).index()
        $('#floor1 .frProList').eq(index2).show().siblings('.frProList').hide()
      })
      $('#floor2 .flList li').click(function () {
        $(this).addClass('flListStyle').siblings('li').removeClass('flListStyle')
        var index2 = $(this).index()
        $('#floor2 .frProList').eq(index2).show().siblings('.frProList').hide()
      })
      $('#floor3 .flList li').click(function () {
        $(this).addClass('flListStyle').siblings('li').removeClass('flListStyle')
        var index2 = $(this).index()
        $('#floor3 .frProList').eq(index2).show().siblings('.frProList').hide()
      })
      $('#floor4 .flList li').click(function () {
        $(this).addClass('flListStyle').siblings('li').removeClass('flListStyle')
        var index2 = $(this).index()
        $('#floor4 .frProList').eq(index2).show().siblings('.frProList').hide()
      })
      //.floorRight dl
      $('.floorRight .frProList dl,.contRight .frProList dl').hover(function () {
        $(this).stop(true, true).addClass('frListDlstyle')
        $(this).animate({
          opacity: '0.8',
          left: '-4px'
        })
      }, function () {
        $(this).removeClass('frListDlstyle')
        $(this).stop(true, true).animate({
          opacity: '1',
          left: '0px'
        })
      })
    }
  })
})
</script>
</body>
</html>